<template>
  <a-descriptions :data="descriptionData" size="large" :column="1" />
</template>

<script lang="ts" setup>
  import { toRefs } from 'vue';

  // 定义接口来表示父组件传递的数据类型
  interface UserData {
    content: string;
    title: string;
    difficulty: number;
    tags: string[];
    createdTime: string;
    status: number;
  }

  // 定义接收的 props，使用 defineProps 来获取数据并为其指定类型
  const props = withDefaults(
    defineProps<{
      data: UserData;
    }>(),
    {}
  );

  // 解构 props 数据，直接获取 data
  const { data } = toRefs(props);

  // 格式化传入的数据，适应 a-descriptions 组件
  const descriptionData = [
    { label: '标题', value: data.value?.title },
    { label: '答案', value: data.value?.content },
    {
      label: '难度',
      value: data.value?.difficulty === 0 ? '简单' : '困难',
    },
    { label: '标签', value: data.value?.tags.join(', ') },
    {
      label: '创建时间',
      value: new Date(data.value?.createdTime).toLocaleString(),
    },
    { label: '状态', value: data.value?.status === 1 ? '已发布' : '未发布' },
  ];
</script>
